<template>
  <label class="s-radio-button" role="radio">
    <input class="s-radio-button__original" type="radio" v-model="model" :value="label" @change="handleChange"/>
    <span class="s-radio-button__inner">
      <slot></slot>
      <template v-if="!$slots.default">{{label}}</template>
    </span>
  </label>
</template>
<script>
import Emitter from "@/mixin/emitter";
export default {
  name: "SRadioButton",
  componentName: "SRadioButton",
  mixins: [Emitter],
  props: ["label", "value"],
  computed: {
    isGroup() {
      let parent = this.$parent;
      while (parent) {
        if (parent.$options.componentName !== "SRadioGroup") {
          parent = parent.$parent;
        } else {
          this.changeData(parent);
          return true;
        }
      }
      return false;
    },
    model: {
      get() {
        return this.isGroup ? this.radioGroups.value : this.value;
      },
      set(val) {
        if (this.isGroup) {
          this.dispatch("SRadioGroup", "input", [val]);
        } else {
          this.$emit("input", val);
        }
      }
    }
  },
  data() {
    return {
      radioGroups: ""
    };
  },
  methods: {
    changeData(val) {
      this.radioGroups = val;
	},
	handleChange(evt){
		this.$nextTick(()=>{
			this.$emit('change',evt.target.value)
			this.isGroup && this.dispatch('SRadioGroup','handleChange',evt.target.value)
		})
	}
  }
};
</script>
    